<template>
    <el-card class="box-card">
        <el-row style="margin-bottom:10px">
            <el-col :span="24">
                <div class="card-header">
                    <span>我的快捷菜单面板</span>
                    <el-button class="button" text>详情</el-button>
                </div>
            </el-col>
        </el-row>
        <div class="main-pannel">
            <el-row>
                <el-col :span="8" v-for="v in menuList" class="menu-item">
                    <el-card shadow="hover">
                        <el-link :icon="v.icon" :underline="false">
                         {{v.name}} 
                    </el-link>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </el-card>
</template>

<script lang="ts" setup>

let menuList = [
    {
        name: '会员管理',
        href: '/order',
        icon: 'User',
        badge: false,
    },
    {
        name: '订单管理',
        href: '/order',
        icon: 'Tickets',
        badge: false,
    },
    {
        name: '商品管理',
        href: '/order',
        icon: 'Goods',
        badge: false,
    },
    {
        name: '店铺管理',
        href: '/order',
        icon: 'OfficeBuilding',
        badge: false,
    },
    {
        name: '营销管理',
        href: '/order',
        icon: 'Position',
        badge: false,
    },
    {
        name: '数据可视化',
        href: '/order',
        icon: 'PieChart',
        badge: false,
    },
    {
        name: '插件管理',
        href: '/order',
        icon: 'Grid',
        badge: false,
    },
]

</script>
<style scoped>
.main-pannel .menu-item{
    height: 48px;
    padding: 30px 0px;
    text-align: center;
}
.main-pannel {
    padding-bottom: 20px;
}
</style>